<template>
  <div>
      <div class="zhezao" v-show="zhezao"></div>
      <div class="top">
          <a href="#" @click="goback"></a>
          <p>提现</p>
      </div>
      <div class="space"></div>
      <router-link to="bank">
      <div class="bank">
        <img src="../../assets/img/user/bank.png" alt="">
        <li>
            <p style="color:#000;">中国工商银行</p>
            <span>尾号0818存蓄卡</span>
        </li>
        <a href="#"></a>
      </div>
      </router-link>
      <div class="space"></div>
      <div class="content">
          <span>提现金额(收取0.1%服务费)</span>
          <li>
              <span>￥</span> <input type="text" v-model="balance">
          </li>
            <ul>
                <span>可用余额{{this.global.balance}}.00元</span>
                <p @click="all">全部提现</p>
            </ul>
            <div class="space"></div>
            <div class="footer">
            <button :class="{'active':(this.balance !== null),'normal':(this.balance == '')}" @click="go">两小时内到账，确认提现</button>
            </div>
      </div>
      <div class="mask" v-show="ismask">
          <li>
              <img @click="close" src="../../assets/img/left.png" alt="">
              <p>输入支付密码</p>
          </li>
          <p>提现金额{{this.balance}}.00元，服务费{{this.balance*0.01}}元</p>
          <div class="psd">
              <p v-for="(item,index) in list" :key="index">
                  <span>{{item}}</span> 
                </p>
                
          </div>
          <span>忘记密码？</span>
          <div class="key">
              <span @click="input(count)">1</span>
              <span @click="input(count)">2</span>
              <span @click="input(count)">3</span>
              <span @click="input(count)">4</span>
              <span @click="input(count)">5</span>
              <span @click="input(count)">6</span>
              <span @click="input(count)">7</span>
              <span @click="input(count)">8</span>
              <span @click="input(count)">9</span>
              <span style="background-color:#e2e7ed;"></span>
              <span>0</span>
              <span style="background-color:#e2e7ed;"></span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            balance:null,
            ismask:false,
            zhezao:false,
            list:["","","","","",""],
            count:0,
        }
    },
    methods:{
        goback(){
            this.$router.go("-1")
        },
        go(){
            if(this.balance){
                if(this.balance<=this.global.balance){
                    this.global.balance -= this.balance
                    this.ismask = true
                    this.zhezao = true
                }else{
                    this.$toast("余额不足")
                }
                

            }else{
                this.$toast.fail("请输入要提现的金额")
            }
        },
        close(){
            this.ismask = false
            this.zhezao = false
        },
        all(){
            this.balance = this.global.balance
        },
        input(count){
            var self = this
            if(count<5){
                self.$set(this.list,count,"●")
                this.count++
            }else{
                self.$set(this.list,count,"●")
                 self.$toast.success("请等待")
                setTimeout(function(){
                self.$router.push("result"+'?id='+self.balance)
                },2000)
            }
             
        }
    }
    
}
</script>

<style lang="less" scoped>
.zhezao{
    height: 200%;
    width: 100%;
    position: absolute; 
    background-color: #000;
    opacity:0.4;
    display: flex;
}
.mask{
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
    height: 340px;
    .key{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        text-align: center;
        span:active{
            background-color: #f6f6f6;
        }
        span{
           width: 32.7%;
           background-color: #fff;
           border: 1px solid #f6f6f6;
           line-height: 34px;
           font-size: 16px;
        }
    }
    li{
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ccc;
        img{
            width: 10px;
            height: 10px;
            background-color: #ccc;
        }
        p{
            margin: 10px;
            font-size: 14px;
            font-weight: 600;
            margin-left: 30%;
        }
    }
    p{
        font-size: 12px;
        font-weight: 600;
        margin: 0px auto;
    }
    >span{
        color: rgb(16, 164, 233);
        font-size: 12px;  
        margin-left: 80%;
        margin-right: 10px;
        width: 100%;
    }
    .psd{
        width: 95%;
        border: 1px solid #ccc;
        height: 35px;
        margin: 0 auto;
        border-radius: 5px;
        display: flex;
        
        p{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            width: 16.6%;
            border-right: 1px solid #ccc;
            position: relative;
        }
        
    }
}
.active{
    background-color: rgb(28, 170, 236);
    color: #fff!important;
}
.normal{
    background-color: #ccc;
    color: #f6f6f6!important;
}
.space {
    height: 15px;
    background-color: #f6f6f6;
}
.top{
    background-color: #fff;
    display: flex;
    align-items: center;
    height: 40px;
    a{
        width: 8px;
        height: 15px;
        background: url("../../assets/img/backleft.png")no-repeat;
        margin-left: 10px;
        background-size: 100%;
    }
    p{
        margin: 0;
        margin-left: 3%;
        color: #000;
        font-size: 12px;
    }
}
.content{
    padding-top: 10px;
    background-color: #fff;
    height: 700px;
    ul{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        p{
            margin: 0;
            color: rgb(24, 156, 218);
            font-size: 12px;
        }
        span{
            color: #7a7a7a;
        }
    }
    span{
        font-size: 12px;
        margin-left: 10px;
    }
    li{
        display: flex;
        align-items: center;
        background-color: #fff;
        margin-top: 10px;
        span{
            font-size: 30px;
        }
        input{
        border: none;
        display: block;
        background-color: #fff;
        width: 100%;
        height: 40px;
        margin: 0 auto;
        font-size: 30px;
        border-bottom: 1px solid #ccc;
    }
    }
    .footer{
        background-color: #f6f6f6;
        padding-bottom: 600px;
        button{
        width: 95%;
        height: 35px;
        display: block;
        padding: 20px auto;
        border: none;
        margin: 0 auto;
        font-size: 13px;
        color: #ccc;
        
    }
    }

}
.bank{
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding:5px 0px;
    a{
        width: 20px;
        height: 20px;
        background: url("../../assets/img/right_1.png") no-repeat;
        background-size: 100%;
    }
    img{
        width: 20px;
        height: 20px;
    }
    li{
        display: flex;
        flex-wrap: wrap;
        margin-left: 10px;
        width: 85%;
        p{
            margin: 0;
            width: 100%;
            font-size: 12px;
            font-weight: 600;
        }
        span{
            font-size: 12px;
            margin-top: 5px;
            color: #ccc;
        }
    }
}
</style>